<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import {
  disableUserApi,
  enableUserApi,
  getUserListApi,
} from '@src/apis/userApi.ts'
import { TypeUser } from '@src/interfaces/TypeUser.ts'
import { TypePageDTO } from '@src/interfaces/TypePageDTO.ts'
import { EnumUserStatus } from '@src/enums/EnumUserStatus.ts'
import { ElMessage } from 'element-plus'
import { router } from '@util/RouterUtil.ts'
import Pagination from '@src/components/Pagination.vue'

const page = ref<TypePageDTO<TypeUser>>({
  current: 1,
  size: 10,
  records: [],
  total: 0,
})
const search = ref({
  name: '',
  account: '',
  phone: '',
})
const handleCurrentChange = (value: number) => {
  console.log(value)
  page.value.current = value
  getUserList()
}
const handleSizeChange = (value: number) => {
  page.value.size = value
  getUserList()
}

const enableUser = (user: TypeUser) => {
  enableUserApi(<number>user.id).then(() => {
    user.status = EnumUserStatus.ENABLE
    ElMessage.success('解封成功')
  })
}

const disableUser = (user: TypeUser) => {
  disableUserApi(<number>user.id).then(() => {
    user.status = EnumUserStatus.DISABLE
    ElMessage.success('禁封成功')
  })
}

const getUserList = () => {
  getUserListApi({
    page: page.value.current,
    size: page.value.size,
    ...search.value,
  }).then((res) => {
    page.value = res.data
  })
}

watch(search, getUserList, {
  deep: true,
})

const searchClassById = (classId: number) => {
  router.push({
    path: '/admin/class',
    query: {
      classId,
    },
  })
}

onMounted(() => {
  getUserList()
})
</script>

<template>
  <div>
    <h2><el-text>用户管理</el-text></h2>
    <div class="input-box">
      <el-input placeholder="搜索用户名" v-model="search.name"></el-input>
      <el-input placeholder="搜索账号" v-model="search.account"></el-input>
      <el-input placeholder="搜索手机号" v-model="search.phone"></el-input>
      <el-button type="primary" @click="getUserList">搜索</el-button>
    </div>
    <div class="table-box">
      <el-table :data="page.records" height="720">
        <el-table-column prop="id" label="用户ID"> </el-table-column>
        <el-table-column prop="classId" label="班级ID">
          <template #default="scope">
            <div v-if="scope.row.classId">
              <el-link
                type="primary"
                @click="searchClassById(scope.row.classId)"
              >
                {{ scope.row.classId }}
              </el-link>
            </div>
            <div v-else>
              <el-text> 未加入班级 </el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="用户名"> </el-table-column>
        <el-table-column prop="account" label="账号"> </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-text
              v-show="scope.row.status === EnumUserStatus.DISABLE"
              type="danger"
              >禁封</el-text
            >
            <el-text
              v-show="scope.row.status === EnumUserStatus.ENABLE"
              type="success"
              >正常</el-text
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template #default="scope">
            <div v-show="scope.row.status === EnumUserStatus.ENABLE">
              <el-button type="danger" @click="disableUser(scope.row)"
                >禁封</el-button
              >
            </div>
            <div v-show="scope.row.status === EnumUserStatus.DISABLE">
              <el-button type="success" @click="enableUser(scope.row)"
                >解封</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <Pagination
        :page="page.current"
        :size="page.size"
        :total="page.total"
        @page-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
h2 {
  text-align: center;
  .el-text {
    font-size: 2em;
  }
}

.input-box {
  display: flex;

  & > * {
    margin: 0 10px;
  }
}
</style>
